<%--
  Created by IntelliJ IDEA.
  User: Aini
  Date: 2017/11/20
  Time: 21:54
  To change this template use File | Settings | File Templates.
--%>
<%@include file="/WEB-INF/jsp/taglib.jsp" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<div class="blog-body">

    <div class="blog-title">
        <p class="blog-name">主题交流区</p>

        <div>
            <div class="blog-option blog-good">精华帖</div>
            <div class="blog-option">今日热门</div>
            <div class="blog-option">最新回复</div>
            <div class="blog-option">最新主题</div>
        </div>
    </div>

    <div class="blog-add">
        <div class="blog-sort">
            <div class="blog-open-sort-option">
                <a class="blog-sort-option blog-sort-option1" href="<spring:url value="/postList?p=${page.currentPage}&option=1"/>">按更新时间</a>
                <img class="sort-icon" src="<spring:url value="/images/login.png"/>">
            </div>
            <div class="blog-other-option1">
                <div class="blog-other-option">
                    <div style="overflow: hidden;border-right: 1px solid #004896;float: left">
                        <a class="blog-sort-option blog-sort-option2" href="<spring:url value="/postList?p=${page.currentPage}&option=2"/>">按阅读量</a>
                    </div>
                    <a class="blog-sort-option blog-sort-option3" href="<spring:url value="/postList?p=${page.currentPage}&option=3"/>">按评论数</a>
                </div>
            </div>
        </div>
        <script>

            $(document).ready(function () {
                var clickSum = 1;
                var openSort = $(".blog-open-sort-option");
                var option1 = $(".blog-sort-option1");
                var option2 = $(".blog-sort-option2");
                var option3 = $(".blog-sort-option3");
                var option = $(".blog-sort-option");
                var sortIcon = $(".sort-icon");

                if('${option}' == 2){
                    option1.insertAfter(option2);
                    option2.insertBefore(sortIcon);
                }

                if('${option}' == 3){
                    option1.insertAfter(option3);
                    option3.insertBefore(sortIcon);
                }


                option.each(function() {
                    $(this).click(function () {
                        if($(this).parent().attr('class') == "blog-open-sort-option") {
                            $(".blog-other-option1").animate({width:"toggle"},300);
                            if (clickSum) {
                                $(".sort-icon").css({
                                    transition: 'transform 0.2s',
                                    transform: 'rotate(270deg)'
                                });
                                clickSum--;
                            } else {
                                $(".sort-icon").css({
                                    transition: 'transform 0.2s',
                                    transform: 'rotate(0deg)'
                                });
                                clickSum++;
                            }
                            return false;
                        }
                        sortIcon.prev().insertAfter($(this));
                        $(this).insertBefore(sortIcon);
                    })
                })

            });

        </script>
        <div class="blog-post" onclick="window.location.href='<spring:url value="/postReleasePage"/>'"><p>发表帖子</p></div>
    </div>

    <div class="blog-list" aos="fade-down">
        <ul>
            <c:forEach var="classify" items="${page.list}" varStatus="s">
                <li>
                    <div class="post-main-title">
                        <div class="post-title"><a href="<spring:url value="/postMain"/>?pid=${classify.post.postId}">${classify.postName}</a></div>
                            <%--<div class="post-title" >${classify.postName}</div>--%>
                        <div class="post-user">
                            <div class="post-user-name">${classify.postPubName}</div>
                            <div class="post-user-image"></div>
                        </div>
                    </div>
                    <div class="post-content">${classify.postText}</div>
                    <div class="post-detail">
                        <div class="blog-time"><fmt:formatDate value="${classify.post.postCreateTime}" pattern="yyyy-MM-dd HH:ss"/> </div>
                        <div class="blog-like"><img src="<spring:url value="/images/reply.png"/>"><p>${classify.post.postReplyNum}</p></div>
                        <div class="blog-like post-view"><img src="<spring:url value="/images/view.png"/>"><p>${classify.post.postReadNum}</p></div>
                    </div>
                </li>
            </c:forEach>


            <script>
                function addReadNum(blogId){
                    jQuery.post("addReadNum", {
                        pid: blogId}, function (res) {
                        if (res === "true") {
                        }
                    });
                }

            </script>
        </ul>

        <div class="page-split">
            <ul>

                <%--解决显示的对齐问题--%>
                <script>

                    //                    $(".post-user-name").each(function () {
                    //                        var author = $(this).text();
                    //                        if (author.length > 4) { $(this).text(author.substring(0,6)+"...")};
                    //                    })

                    $(".post-title").each(function () {
                        var author = $(this).text();
                        if (author.length == 0) { $(this).find("a").text("无题")}
                    });

                    $(".blog-like").each(function () {
                        var author = $(this).find("p").text();
                        if (author > 999) { $(this).find("p").text("999+")}
                    });

                    //                    $(".post-content").each(function () {
                    //                        var author = $(this).text();
                    //                        if (author.length > 50) { $(this).text(author.substring(0,50)+"...")};
                    //                    })



                </script>
                <c:if test="${page.currentPage>0}">
                    <li class="page-last">
                        <a href="<spring:url value='/postList?p=1&${option}'/>">首页</a>
                    </li>
                </c:if>


                <c:if test="${page.currentPage>1}">
                    <li class="page-next">
                        <div class="page-next-container">
                            <a href="<spring:url value='/postList?p=${page.currentPage-1}&option=${option}'/>">< 上一页</a>
                        </div>
                    </li>
                </c:if>

                <c:forEach var="t" begin="1" end="${page.totalPage}">
                    <c:choose>
                        <c:when test="${page.currentPage == t}">
                            <li class="page-number" style="border: none">
                                <a style="border: none">${t}</a>
                            </li>
                        </c:when>
                        <c:otherwise>
                            <li class="page-number">
                                <a href="<spring:url value='/postList?p=${t}&option=${option}'/>">${t}</a>
                            </li>
                        </c:otherwise>
                    </c:choose>
                </c:forEach>

                <c:if test="${page.currentPage<page.totalPage}">
                    <li class="page-next">
                        <div class="page-next-container">
                            <a href="<spring:url value='/postList?p=${page.currentPage+1}&option=${option}'/>">下一页 ></a>
                        </div>
                    </li>
                </c:if>

                <c:if test="${page.currentPage<=page.totalPage}">
                    <li class="page-last">
                        <a href="<spring:url value='/postList?p=${page.totalPage}&option=${option}'/>">尾页</a>
                    </li>
                </c:if>
            </ul>

        </div>
    </div>
</div>
